<template>
  <div class="home">
    <el-row>
      <el-col :span="10" :offset="1">
        <el-card>
          <div slot="header" class="clearfix">
            <span><b>个人信息</b></span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="toEditPassword">修改密码</el-button>
          </div>
          <el-row class="profile">
            <span>用户名：{{ profile.userName }}</span>
            <span>昵称：{{ profile.nickName }}</span>
            <span>登录时间：{{ profile.lastLoginTime }}</span>
            <span>登录地点：{{ profile.ipAddress }}</span>
            <span>登录IP：{{ profile.lastLoginIp }}</span>
          </el-row>
        </el-card>
        <el-card style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span><b>技术选型</b></span>
          </div>
          <el-row>
            <el-col :span="12">
              <p>后端技术</p>
              <br/>
              <p>SpringBoot</p>
              <p>MyBatis</p>
              <p>Druid</p>
              <p>Fastjson</p>
              <p>javax.mail</p>
              <p>Minio</p>
              <p>Kaptcha</p>
              <p>……</p>
            </el-col>
            <el-col :span="12">
              <p>前端技术</p>
              <br/>
              <p>Vue</p>
              <p>Vuex</p>
              <p>Element-ui</p>
              <p>Axios</p>
              <p>Less</p>
              <p>……</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="2">
        <el-card>
          <div slot="header" class="clearfix">
            <span><b>微博热搜</b></span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="refrechHot">
              <i class="el-icon-refresh"></i> 刷新
            </el-button>
          </div>
          <div v-for="(hot, index) in weiboHot" :key="index" v-if="index < 10" class="hot">
            <a :href="'https://s.weibo.com/weibo?q=%23'+hot.note+'%23'" target="_blank">
              {{ (index + 1) + ". " + hot.note }}
            </a>
          </div>
        </el-card>
        <el-card style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <span><b>更新日志</b></span>
          </div>
          <el-collapse>
            <el-collapse-item title="v1.0.0 - 暂未发布" name="1">
              <div>Ape - 低代码开发平台暂未发布正式版</div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>
    
    <Form ref="edit-password-form" title="修改密码" 
      :visible.sync="editPasswordFormVisible" :fields.sync="editPasswordFormFields" 
      :formData="editPasswordFormDate" :submitForm="editPassword"
    >
    </Form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      profile: {},
      editPasswordFormVisible: false,
      editPasswordFormFields: [
        {
          label: "旧密码",
          value: "oldPassword",
          type: "password",
          rules: [{ required: true, message: "旧密码不能为空!" }],
        },
        {
          label: "新密码",
          value: "newPassword",
          type: "password",
          rules: [{ required: true, message: "新密码不能为空!" }],
        },
      ],
      editPasswordFormDate: {},

      weiboHot: [],
    };
  },
  beforeCreate() {
    // 获取个人信息
    this.$api.user.profile().then(res=>{
      this.profile = res.data;
    })
  },
  mounted() {
    this.weiboHotSearch();
  },
  methods: {
    refrechHot(){
      this.weiboHotSearch();
    },
    weiboHotSearch(){
      this.weiboHot = [];
      this.$api.other.weiboHotSearch().then(res=>{
        this.weiboHot = res.data.data.realtime;
      })
    },
    editPassword(){
      this.$api.user.editPassword(this.editPasswordFormDate).then(res=>{
        if(res.code == 200){
          this.editPasswordFormVisible = false;
          this.$message.success("修改成功");
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    toEditPassword(){
      this.editPasswordFormVisible = true;
      this.editPasswordFormDate = {};
    }
  },
};
</script>

<style lang="less" scoped>
.home {
  .profile {
    span {
      display: block;
      margin-bottom: 10px;
    }
  }
  .hot {
    margin-bottom: 10px;
    a {
      text-decoration: none;
      color: #303133;
    }
    a:hover {
      color: #0000EE;
    }
  }
}
</style>